<template>
  <div class="container">
    <input type="text" v-model="name" />
    <h2>正则表达式</h2>
    <span @click="boj.title++">嘉嘉</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      boj: {
        title: 1,
      },
    };
  },

  computed: {
    obj1() {
      return JSON.parse(JSON.stringify(this.boj));
    },
  },
  watch: {
    // // 监听属性 普通监听
    name(newValue, oldValue) {
      console.log(newValue, oldValue);
      if (newValue == 123) {
        document.body.style.background = "red";
      } else {
        document.body.style.background = "none";
      }
    },
    // 深度监听
    obj1: {
      deep: true,
      immediate: true, //立即执行
      handler(newValue, oldValue) {
        console.log(newValue, oldValue, 11);
        if (newValue == 1) return (document.body.style.background = "green");
      },
    },
  },

  mounted() {
    /* 
    /nnn/  正则表达式开启 
    ^ 开头
    $ 结尾
    {n} 正好出现次数
    {m,n} 出现m-n次
    {m,} m次以上
    + 至少一次 ,相当于{1,}
    * 0个或者多个,相当于{0,}
    ? 0个或者1个,相当于{0,1}
    i 忽略字母大小写
    g 全局匹配 
    [a-z] 任意小写字母
    [A-Z] 任意大写字母
    [A-z] 任意大小写字母 相当于 /[a-z]i/ 或 /[A-Z]i/
    [0-9] 任意数字
    [^0-9] 除了数字
    [^a-z] 除了字母
     \d 任意数字
     \D 除了数字
     \w 任意字母，数字 下划线  相当于[A-z0-9_]
     \W 除了字母，数字 下划线  相当于[^A-z0-9_]
    */

    let phoneNum = /^1[3-9]\d{9}$/;
    let mailbox = "";
    console.log(phoneNum.test("13631391244"), 1111);

    let a = "2021/11/19";
    console.log(a.replace(/\//g, "-"));

    let b = "abs123456asad13213";
    let c = "1a2b3c4d";
    console.log(b.replace(/[a-z]/g, ""));
    console.log(c.split(/[0-9]/));

    //  在构造函数中可以传递一个匹配模式作为第二个参数
    /*
    可以使
     i 忽略大小写 
     g 全局匹配模式
   */
    /*  let reg = new RegExp("Ab", "i");
    console.log(reg);
    let str = "b";
    let result = reg.test(str);
    console.log(result);
    console.log(reg.test("abcss")); */
    // 使用字面量来创建表达式

    /* 
        let reg = /a/i;  字面量 更简单
   let reg = new RegExp("Ab", "i");  构造函数 更灵活
     */
    // let reg = new RegExp("Ab", "i");

    //第二个参数 i 忽略大小写的意思
    // let reg = /a/i;
    // console.log(reg.test("Acss"));

    //创建一个正则表达式，检查一个字符串中是否有a或b
    // reg = /a|b/;
    // console.log(reg.test("acs"));

    // 创建一个正则表达式检查一个字符串中是否有字母
    /*  []里的内容也是或的关系
     /[ab]/ == /a|b/
     /[a-z]/ 表示任意小写字母 
     [A-Z] 表示任意大写字母 
     /[A-z]/ 任意字母   相当于 /[a-z]i/或 /[A-Z]i/
    */
    // reg = /[A-z]/;
    // console.log(reg.test("b"));

    // 检查一个字符串中是否含有abc 或adc 或aec
    // reg = /a[ber]c/;
    // console.log(reg.test("arac"));
    /* 
     /[^ ]/ 除了里面的
     /[0-9]/ 任意数字 /[^0-9]/ 除了数字
    */
    /* 
     split()
       可以将一个字符串拆分为一个数组
       方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
       这个方法即使不指定全局匹配，也会自动匹配全局
    */
    //根据任意字母将字符串拆分
    let str = "1a2b3c4d5e6f7";
    let result = str.split(/[A-z]/);
    console.log(result);

    /*   search() 
    可以搜索字符串中是否含有指定内容
    如果搜索到指定内容，则会返回第一次出现的索引 ，如果没有搜索到返回-1
    它可以接受一个正则表达式作为参数。然后根据正则表达式去检索字符串
    search()只会查找第一个
 */
    str = "hello  hello afc aec";
    result = str.search(/a[bfe]c/);
    // console.log(result);

    /* 
      match() 
      可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
      默认情况下我们的match只会找到第一个符合要求的内容，找到后就停止检索
        我们可以设置 正则表达式为全局匹配模式，这样就会匹配到所有内容
        可以为一个正则表达式设置多个匹配模式，且顺序无所谓 str.match(/[a-z]/gi)
      match()会将匹配到的内容封装到一个数组中返回，即使只查到一个数组
    */
    str = "ssjhj555shdjsafaf2132132";
    result = str.match(/[a-z]/gi);
    console.log(str.match(/[a-z]/gi),555);
    /* 
      replace() 
         1.可以将字符串中指定内容替换为新的内容
         2.新的内容  
      默认只会替换第一个
    */
    result = str.replace(/[A-z]/g, "");
    // console.log(result);

    /* 
      创建一个正则表达式检查一个字符串中是否含有aaa
    */
    /*  
       量词
         通过量词可以设置一个内容出现的次数
          量词只对它前边的内容起作用
         {n} 正好出现n次
         () 表示一起的
         {m,n}出现m-n次
         {m,} m次以上
         + 表示至少一个，相当于{1,}
         * 表示0个或多个，相当于{0,}
         ？ 表示0个或者1个，相当于{0,1}
   */

    let reg = /a{3}/;
    reg = /(ab){3}/;
    reg = /ab{1,3}c/;

    reg = /ab+c/;
    reg = /ab*c/;
    reg = /ab?c/;
    // console.log(reg.test("abbc"));

    /* 
    检查一个字符串是否以a开头
  */
    reg = /^a/; // /^ a/ 匹配开头a
    reg = /a$/; // /$/ 匹配结尾的啊

    // 如果在正则表达式中 同时使用^ $ 则要求字符串必须完全符合正则表达式
    reg = /^a$/;
    reg = /^a|a$/; //以a开头或结尾
    // console.log(reg.test("cbbbsa"));

    /* 
       创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
    */
    let phoneStr = "13031301244";
    let phoneReg = /^1[3-9][0-9]{9}$/;
    // console.log(phoneReg.test(phoneStr));

    /* 
      检查一个字符串中是否含有 .
      . 表示任意字符
      \.表示 .
      \\ 表示 \
    */
    let dot = /\./;
    dot = /\\/;

    /* 
     \w 
      // 任意字母，数字 下划线 [A-z0-9_]
     \W
      // 除了字母，数字 下划线 [A-z0-9_]
     \d
      //  任意数字 
     \D
     // 除了数字
     \s
     // 空格
     \S
      // 除了空格
     \b
     // 单词边界
     \B
    //  除了单词边界
    */
    dot = /\w/;
    dot = /\W/;
    dot = /\d/;
    dot = /\s/;
    dot = /\S/;

    // 创建一个正则表达式检查一个字符串是否含有单词child

    dot = /\bchild\b/;

    console.log(dot.test("hello child red"));

    /*  */
  },
};
</script>
<style lang="less" scoped>
h2 {
  //   box-shadow: 10px 10px 10px 10px gold; //背景阴影 1.水平 2.垂直 3.模糊程度 4.阴影大小 5.阴影颜色
  //   background: green url("../assets/test/12.jpg") no-repeat fixed center top; //1.背景颜色 2.背景图片 3.是否平铺 4.是否图片固定 5.图片位置
  //   background-size: 80px 30px; //规定背景图尺寸
  //   text-indent: 20px; //文字首行缩进
  //   font-style: italic; //字体样式
  //   transform: rotate(45deg); //旋转
  //   transform-origin: 60% 40%; //起始位置
  //   text-shadow: 2px 2px; //文本阴影
  //   transform: scale(0.9); //缩放

  // 三角形 写法一
  // width: 0;
  // height: 0;
  // border: 100px solid transparent;
  // border-bottom-color: red;

  // 三角形 写法二
  // width: 0;
  // height: 0;
  // border-width: 100px;
  // border-style: solid;
  // border-color: transparent #0099cc transparent transparent;
  // transform: rotate(90deg); /*顺时针旋转90°*/
}
</style>